import { createRouter, createWebHashHistory } from "vue-router";
import Home from "./views/Home.vue";
import Login from "./views/Login.vue";
import TodoList from "./views/TodoList.vue";
import Profile from "./views/Profile.vue";
import store from "./store";

// 定义路由映射
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    alias: "/home",
    redirect: { name: "TodoList" },
    children: [
      {
        path: "todos",
        component: TodoList,
        name: "TodoList",
      },
      {
        path: "profile",
        component: Profile,
        name: "Profile",
      },
    ],
  },
  {
    name: "Login",
    path: "/login",
    component: Login,
  },
  {
    path: "/about",
    // 路由懒加载
    component: () => import("./views/About.vue"),
  },
];
// 实例化路由对象
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 导航守卫
router.beforeEach(async (to, from) => {
  // 判断用户权限以及限制导航
  if (["Home", "TodoList", "Profile"].includes(to.name)) {
    // 先执行获取用户信息
    await store.dispatch("getUserInfo");
    // 判断用户是否登录
    if (!store.state.user) return { name: "Login" };
  }
  return true;
});

export default router;
